<template>
    <div v-for="item in detal" class="decse">
        <span class="title">{{item.label}}</span><span class="decse_val" :title="item.value">{{ item.value }}</span>
    </div>
    <OrderStatus :orderInfo="[...detal, {label: '订单阶段', value: '贷款受理'}]"/>
</template>
<script setup>
import columnEumns from '@/components/CommonPage/columnEnums.js'
import {orderStatus, platform, stageStatus, orderStage, yesOrNo} from "@/utils/enum.js"
import OrderStatus from '../../incomingOrders/components/orderStatus.vue'
import { computed } from 'vue';
const prop = defineProps(["rowInfo"])
let column = columnEumns.loanAcceptance
const getStatus = (row, status, key) => { return (status||[]).filter(item => item.value == row[key])[0]?.label||'--'}

// 校验值 是否需要转换
const getVal = (row) => {
    let list = {"ebusinessPlatform": platform, "orderStage": orderStage, "stageStatus": stageStatus, "orderStatus": orderStatus, "ifDataSupport": yesOrNo}
    if(list[row.prop]){return getStatus(prop.rowInfo, list[row.prop], row.prop)}
    else return prop.rowInfo[row.prop]
}
// 获取标题
const detal = computed(() => {
    return column.map(item => {
        return {label: item.label, value: getVal(item)}
    })
})
</script>
<style scoped>
.decse{
    display: inline-flex;
    margin-bottom: 10px;
}
.title{
    width: 150px;
    font-weight: 600;
    text-align: right;
    padding-right: 10px;
}
.decse_val{
    width: 220px;
    display: inline-block;
    border: 1px solid var(--el-text-color-disabled);
    padding: 0 15px;
    border-radius: 4px;
    overflow: hidden;
    text-wrap: nowrap;
    background-color: var(--el-color-info-light-9);
}
</style>